<template>
	<view class="uni-app-tab">
		<wd-steps :active="4" vertical dot>
			<wd-step v-for="(item,index) in list" :key="index" :title="item.baseProject">
				<template #description>
					<view class="desc">实战项目项目：{{item.project}}</view>
					<view class="desc">技术：{{item.label}}</view>
					<view class="desc">时间：{{item.date}}</view>
					<view v-if="item.desc" class="desc">{{item.desc}}</view>
				</template>
			</wd-step>
		</wd-steps>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';

	const list = ref([{
		baseProject: '第一代',
		project: '公安局移动端门户',
		label: 'uview',
		date: '2020',
	}, {
		baseProject: '第二代',
		project: '价格采集、一人一码',
		label: 'uView2',
		date: '2021~2025',
		desc:'发现缺点：Vue2启动慢'
	}, {
		baseProject: '第三代',
		project: '仓库管理系统、电厂',
		label: 'Vue3 + Wot UI + alova.js',
		date: '2025',
	}, 
	])
</script>

<style lang="scss" scoped>
	.uni-app-tab {
		padding: 20rpx;
	}
</style>